<template>
  <div class="component-base-config">
    <div
      class="content-pad-item__title with-tag"
      :class="{ 'is-open': xAxisContentVisible }"
      @click.stop="changeVisible"
    >
      X 轴
    </div>
    <el-collapse-transition>
      <div v-show="xAxisContentVisible" style="margin-top: 8px">
        <div class="row-grid">
          <p>显示坐标轴</p>
          <el-switch v-model="xAxis.show" />
        </div>
        <el-collapse-transition>
          <div v-show="xAxis.show">
            <div class="row-grid">
              <p>坐标轴名称</p>
              <el-input v-model="xAxis.name" :maxlength="20" />
            </div>
            <div class="row-grid">
              <p>字体设置</p>
              <el-color-picker v-model="xAxis.nameTextStyle.color" />
              <el-select v-model="xAxis.nameLocation" style="margin-left: 8px">
                <el-option label="右侧" value="end" />
                <el-option label="中间" value="middle" />
                <el-option label="左侧" value="start" />
              </el-select>
              <el-input-number
                v-model="xAxis.nameRotate"
                :step="1"
                :min="0"
                :max="360"
                controls-position="right"
                class="rotate-number-input"
                style="margin-left: 8px"
              />
            </div>
            <div class="row-grid">
              <p>显示轴线</p>
              <el-switch v-model="xAxis.axisLine.show" />
            </div>
            <el-collapse-transition>
              <div v-show="xAxis.axisLine.show">
                <div class="row-grid">
                  <p>轴线设置</p>
                  <el-color-picker v-model="xAxis.axisLine.lineStyle.color" />
                  <el-select
                    v-model="xAxis.axisLine.lineStyle.type"
                    style="margin-left: 8px"
                  >
                    <el-option value="solid">
                      <span
                        style="
                          display: inline-block;
                          width: 100%;
                          height: 0;
                          border-bottom: 1px solid #cccccc;
                        "
                      ></span>
                    </el-option>
                    <el-option value="dashed">
                      <span
                        style="
                          display: inline-block;
                          width: 100%;
                          height: 0;
                          border-bottom: 1px dashed #cccccc;
                        "
                      ></span>
                    </el-option>
                  </el-select>
                  <el-input-number
                    v-model="xAxis.axisLine.lineStyle.width"
                    :step="1"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    style="margin-left: 8px"
                  />
                </div>
              </div>
            </el-collapse-transition>
            <div class="row-grid">
              <p>显示刻度</p>
              <el-switch v-model="xAxis.axisTick.show" />
            </div>
            <el-collapse-transition>
              <div v-show="xAxis.axisTick.show">
                <div class="row-grid">
                  <p>刻度设置</p>
                  <el-color-picker v-model="xAxis.axisTick.lineStyle.color" />
                  <el-select
                    v-model="xAxis.axisTick.lineStyle.type"
                    style="margin-left: 8px"
                  >
                    <el-option value="solid">
                      <span
                        style="
                          display: inline-block;
                          width: 100%;
                          height: 0;
                          border-bottom: 1px solid #cccccc;
                        "
                      ></span>
                    </el-option>
                    <el-option value="dashed">
                      <span
                        style="
                          display: inline-block;
                          width: 100%;
                          height: 0;
                          border-bottom: 1px dashed #cccccc;
                        "
                      ></span>
                    </el-option>
                  </el-select>
                  <el-input-number
                    v-model="xAxis.axisTick.lineStyle.width"
                    :step="1"
                    :min="1"
                    :max="10"
                    controls-position="right"
                    style="margin-left: 8px"
                  />
                </div>
              </div>
            </el-collapse-transition>
            <div class="row-grid">
              <p>显示标签</p>
              <el-switch v-model="xAxis.axisLabel.show" />
            </div>
            <el-collapse-transition>
              <div v-show="xAxis.axisLabel.show">
                <div class="row-grid">
                  <p>标签设置</p>
                  <el-color-picker v-model="xAxis.axisLabel.color" />
                  <el-input-number
                    v-model="xAxis.axisLabel.margin"
                    :step="1"
                    :min="0"
                    :max="50"
                    controls-position="right"
                    style="margin-left: 8px"
                  />
                  <el-input-number
                    v-model="xAxis.axisLabel.rotate"
                    :step="1"
                    :min="0"
                    :max="360"
                    controls-position="right"
                    class="rotate-number-input"
                    style="margin-left: 8px"
                  />
                </div>
              </div>
            </el-collapse-transition>
            <div class="row-grid">
              <p>显示分割线</p>
              <el-switch v-model="xAxis.splitLine.show" />
            </div>
            <el-collapse-transition>
              <div v-show="xAxis.splitLine.show">
                <div class="row-grid">
                  <p>分割线设置</p>
                  <el-color-picker v-model="xAxis.splitLine.lineStyle.color" />
                  <el-select
                    v-model="xAxis.splitLine.lineStyle.type"
                    style="margin-left: 8px"
                  >
                    <el-option value="solid">
                      <span
                        style="
                          display: inline-block;
                          width: 100%;
                          height: 0;
                          border-bottom: 1px solid #cccccc;
                        "
                      ></span>
                    </el-option>
                    <el-option value="dashed">
                      <span
                        style="
                          display: inline-block;
                          width: 100%;
                          height: 0;
                          border-bottom: 1px dashed #cccccc;
                        "
                      ></span>
                    </el-option>
                  </el-select>
                  <el-input-number
                    v-model="xAxis.splitLine.lineStyle.width"
                    :step="1"
                    :min="0"
                    :max="50"
                    controls-position="right"
                    style="margin-left: 8px"
                  />
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </el-collapse-transition>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { xAxis } from "../../../data/defaultConfig";
import { objectDeepClone } from '../../../untils/commonUtils';
export default {
  name: 'MXAxis',
  data(){
    return{
      xAxisContentVisible:false,
      xAxis:xAxis
    }
  },
  computed: {
    acComponent(){
      return this.$store.state.imageDragMoudules.acComponent;
    },
    acComponentId(){
      return this.$store.state.imageDragMoudules.acComponent.id;
    }
  },
  methods:{
    changeVisible(){
      this.xAxisContentVisible = !this.xAxisContentVisible;
    }
  },
  watch:{
    acComponentId:{
      handler(newVal, oldVal) {
        console.log("点击：",newVal);
        this.xAxisContentVisible = false;
        !!newVal && this.acComponent && objectDeepClone(this.xAxis, this.acComponent.xAxis);
      },
      deep: true,
      immediate: true
    },
    xAxis:{
      handler(newVal, oldVal) {
        console.log("xAxis:",newVal);
        this.$store.commit('updateComponent', { newState: this.xAxis, key: 'xAxis' });
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style scoped>
.config-form-item + .config-form-item {
  margin-top: 8px;
}
</style>
